<template>
	<view class="cart-address">
		<!-- 没有地址时 -->
		<view class="address-none" @click="addAddress" v-if="JSON.stringify(addressInfo)=='{}'">
			<text class="address-none-text">请添加收货地址+</text>
		</view>
		<!--有地址时-->
		<view class="address-data" v-else @click="addAddress">
			<view class="address-row1">
				<view class="adress-name">
					收货人：{{addressInfo.userName}}
				</view>
				<view class="address-tel-area">
					<view class="address-tel">
						电话：{{addressInfo.telNumber}}
					</view>
					<uni-icons class="address-arrow" type="right" size="16"></uni-icons>
				</view>
			</view>
			<view class="address-row2">
				<view class="address-row2-left">
					收货地址：
				</view>
				<view class="address-row2-detail">
					{{adr}}
				</view>
			</view>
		</view>
		
		<!--底部斜线-->
		<view class="address-bottom"></view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations } from 'vuex'
	export default {
		name:"my-address",
		data() {
			return {
				// addressInfo:{}, // 地址内容
			};
		},
		computed:{
			...mapState('m_user', ['addressInfo']),
			...mapGetters('m_user', ['adr']),
		},
		methods:{
			...mapMutations('m_user',['updataAddress']),
			// 点击添加收货地址按钮
			async addAddress(){
				// 授权
				/* uni.openSetting({
					complete(com){
						console.log('comopen',com)
					}
				}) */
				// this.auth()
				// 这个是获取授权状态的api
				/* uni.getSetting({
					success(res){
						console.log('ressuc',res)
					}
				}) */
				
				/*  // 这样请求出来的数据在页面不会更新更不会渲染到页面上去
				uni.chooseAddress({
					complete(res){
						console.log('com',res)
						if(res.errMsg == 'chooseAddress:ok'){
							// 请求成功 获取地址成功
							this.addressInfo = res
							console.log('this.addressInfo',this.addressInfo)
						}else{
							uni.$showMsg('获取地址失败')
						}
					}
				}) */
				const res = await uni.chooseAddress().catch(err=>err)
				console.log('res',res)
				// console.log('com',res)
				// 跳转到地址页面点击确定按钮
				if(res && res.errMsg == 'chooseAddress:ok'){
					// 请求成功 获取地址成功
					// this.addressInfo = res
					this.updataAddress(res)
				}
				// res.erMsg=='chooseAddress:fail cancel' 跳转到地址页面点击了取消按钮
				// res.errMsg == 'chooseAddress:fail auth deny' 用户没有授权时的信息这是安卓的  ios的是chooseAddress:fail authorize no response,
				// 如果用户没有授权就跳出来让用户授权
				if(res.errMsg == 'chooseAddress:fail auth deny' || res.errMsg == 'chooseAddress:fail authorize no response'){
					this.auth()
				}
			},
			// 让用户授权的操作
			async auth(){
				let res = await uni.showModal({
					title: '提示',
					content: '检测到您没打开地址授权，是否去设置打开？',
					confirmText: '确认',
					cancelText: '取消'
				})
				console.log('resauth',res)
				if(res.cancel){
					// 点了取消按钮
					uni.$showMsg('您取消了地址授权！')
				}else if(res.confirm){
					// 点了确认按钮
					uni.openSetting({
						success(result){
							// 在授权页面打开了授权按钮
							if(result.authSetting['scope.address']) return uni.$showMsg('授权成功，请选择地址！')
							// 在授权页面并未打开授权按钮
							if(result.authSetting['scope.address']) return uni.$showMsg('您取消了地址授权！')
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.cart-address{
	background: #fff;
	position: relative;
	border-bottom-width: 5px;
	
	
	.address-none{
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
		.address-none-text{
			display: block;
			background-color: green;
			color: #fff;
			font-size: 14px;
			padding: 8px 10px ;
			border-radius: 5px;
		}
	}
	
	.address-data{
		color: gray;
		display: flex;
		flex-direction: column;
		padding:10px 5px;
		font-size: 14px;
		.address-row1{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.address-tel-area{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 5px;
				.address-tel{
					margin-right: 5px;
				}
			}
		}
		
		.address-row2{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-bottom: 5px;
			.address-row2-left{
				
			}
			.address-row2-detail{
				
			}
		}
	}
	
	.address-bottom{
		position: absolute;
		width: 100%;
		height: 5px;
		bottom: 0;
		left: 0;
		overflow: hidden;
		&::after{
			position: absolute;
			width: 750px;
			height: 750px;
			content: '';
			bottom: 0;
			left: 0;
			background:#c00000;
			background-image: url('/static/addB.webp');
			  background-repeat: repeat;
			  background-position: right 0 center;
			  transform: rotate(60deg);
			  background-size: 9%;
			  transform-origin:left center;
		}
	}
}
</style>